<template>
  <div id="history">
     <Header
     title="最近用车"
     :isClickLeft="true"
     @onClickLeft="onClickLeft"
    />
    <div class="container" >
       
          <div class="list">
             <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="10"
          >
            <van-cell :name="item.apply_qy_id" v-for="(item, index) in list" :key="index">
                <div  @click="clickAction(item)" class="list-item">
                    <p>用车人：{{item.yong_che_ren}}</p>
                    <p>用车人电话: {{item.apply_use_phone}} {{item.apply_duanhao}} </p>
                    <p>用车人数：{{item.apply_man_num}} </p>
                    <p>用车性质：{{item.yong_che_xz}} </p>
                    <p>用车区域：{{item.apply_qy_id}} </p>
                    <p>出发地：{{item.apply_use_address}} </p>
                    <p>目的地：{{item.apply_destination}} </p>
                    <p>用车事由：{{item.apply_remark}}</p>
                </div>
            </van-cell>
          </van-list>
             
          </div>
    </div>
  </div>
</template>

<script>
import  Header from '../../components/Header'

export default {
  name: 'history',
  data(){
    return{
      list: [],
      page: 1,
      loading: false,
      isLoading: false,
      finished: false,
    }
  },
   mounted(){
      this.getListData()
   },

  methods:{
    onClickLeft(){
      this.$emit('onSelectItem',null)
    },
    //回传数据
    clickAction(data){
        this.$emit('onSelectItem',data)
    },
    //加载更多
    onLoad() {
      if (!this.isLoading) {
        this.getListData();
      }
    },
   //加载列表数据
    getListData() {
      this.$http
        .get('/carorder/queryRecentApply', {
          userDeptId: localStorage.getItem("deptId"),
          pageNo: this.page,
          pageSize: 10,
        })
        .then((result) => {
          this.loading = false;
          this.isLoading = false;
          
          this.page = this.page + 1;
          this.list = this.list.concat(result.data);
         
          if (result.data.length < 10) {
            this.finished = true;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
 components: {
   "Header":Header
  },
  
}
</script>

<style scoped>
.list{
    margin:20px;
    
}
.list-item{
    margin-top:20px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 20px 0px rgba(120,120,120,0.16);
    border-radius:6px;
    padding:18px;
    background: #ffffff;
    font-size:26px;
    font-weight:bold;
    color:#333333;
    line-height:46px;

}

</style>
